<template>
  <view class="min100 bg pt-60">
    <view class="text-center ">
      <image :src="info.image" class="orderImg radius-20" mode="aspectFill"></image>
      <view class="white size-30 mt-20">{{ info.name }}</view>
      <view class="mtb-30 white bold size-36"> ￥{{ info.price }} </view>
      <!-- <view class="white mb-60 size-30">
				订单号：{{info.order_num}}
			</view>
			<view class="white mt-60 size-30">
				下单时间：{{info.create_time}}
			</view> -->
    </view>
    <!-- 支付 -->
    <!-- app环境 -->
    <view class="plr-40 mt-100">
      <view class="white bold size-30 pb-30 pl-10" style="border-bottom: 2rpx solid #EBEBEB;"> 请选择支付方式 </view>
      <view class="">
        <view @click="current = item.value" class="flex pt-30 pb-30 flex-between" style="border-bottom: 2rpx solid #EBEBEB;" v-for="(item, index) in list" :key="item.value">
          <view class="flex white">
            <image :src="item.image" class="payIcon mr-20" mode=""></image>
            <view>{{ item.name }}<text v-if="item.value == 0" class="size-26 gold">（{{ userAccount }})</text></view>
          </view>
          <image src="/static/select-pink.png" mode="" v-if="current == item.value" style="width: 32rpx;height: 32rpx;"></image>
					<image src="/static/selects.png" mode="" v-else style="width: 32rpx;height: 32rpx;"></image>
        </view>
      </view>
    </view>
    <view class="pr-30 pl-30 mt-100">
    	<u-button hover-class="none" @click="affirmPay" class="payBtn">确认支付</u-button>
    </view>
		<!-- 支付密码弹窗 S -->
		<u-popup v-model="showPassword" width="90%" mode="center" border-radius="16" @close="closePassword">
			<view class="pl-30 pr-30 pt-30 pb-30">
				<view class="text-center mb-20 size-26">请输入密码</view>
				<u-message-input disabled-keyboard :maxlength="6" :dot-fill="true" :value="password"></u-message-input>
				
				<!-- <u-button class="mt-20">支付</u-button> -->
			</view>
		</u-popup>
		<u-keyboard ref="uKeyboard" :mask-close-able="false" :confirm-btn="false" :show-tips="false" @cancel="cancelKey" @backspace="backspace" @change="changePassword" :mask="false" v-model="keyShow" :dot-enabled="false"></u-keyboard>
		<!-- 支付密码弹窗 E -->
  </view>
</template>

<script>
	// #ifdef APP-PLUS
	const module = uni.requireNativePlugin('SandPayTypeModule')
	// #endif
	
export default {
  data() {
    return {
      userAccount: 0,
      list: [
        {
          value: '0',
          name: '余额支付',
					image:'/static/yue.png'
        },
				// #ifdef H5
				// {
				// 	name:'杉德',
				// 	value:7,
				// 	image:'/static/sahnde.png'
				// },
				// #endif
				// #ifdef APP-PLUS
				// {
				// 	name:'杉德',
				// 	value:8,
				// 	image:'/static/sahnde.png'
				// },
				// #endif
				// {
				//   value: '1',
				//   name: '支付宝',
				// 	image:'/static/zhifubao.png'
				// },
				// {
				//   value: '2',
				//   name: '微信',
				// 	image:'/static/weixin.png'
				// }
      ],
      current: 0,
      info: {},
      isWx: false,
      btnDisabled: false,
      config_appid: '',
      id: '',
			password:'',
			showPassword:false,//密码弹框
			keyShow:false,
    }
  },
  onLoad(options) {
    this.id = options.order_id
    this.$http('api/orders/goodsOrderDetail', {
      id: this.id,
    }).then(res => {
      this.info = res
    })
  },
  onShow() {
    this.$http('api/account/account').then(res => {
      this.userAccount = res.account
    })
    this.$http('api/login/serverConfig').then(res => {
      this.config_appid = res.wx_global_app_id
    })
    // #ifdef H5
    // 判断是否为微信环境
    let ua = navigator.userAgent.toLowerCase()
    let url = window.location.href
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      if (url.indexOf('code') != -1) {
        let code = url.split('?')[1].split('&')[0].split('=')[1]
        this.$http(
          'api/user/auth',
          {
            code: code,
          },
          'POST'
        ).then(res => {})
      }
      this.isWx = true
    } else {
      this.isWx = false
    }
    // #endif
  },
  methods: {
		confirmKey () {
			console.log(e);
		},
		closePassword () {
			console.log('00');
		},
		backspace () {
			this.password = this.password.substring(0,this.password.length-1)
		},
		//取消输入
		cancelKey () {
			this.password = ''
			this.showPassword = false
		},
		changePassword (e) {
			if (this.password.length < 6) {
				this.password+=e
				if (this.password.length == 6) {
					this.keyShow = false
					this.showPassword = false
					this.toPay()
				}
			} else {
				this.keyShow = false
				this.showPassword = false
			}
			
		},
    radioChange(e) {
      this.current = e.detail.value
    },
		affirmPay () {
			if (this.current == 0) {
				if (this.userAccount < this.info.price) return uni.showToast({
					title:'余额不足，请充值',
					icon:'none'
				})
				this.showPassword = true
				this.keyShow = true
			} else {
				this.toPay()
			}
		},
    toPay() {
      let _this = this
      if (this.current == -1) {
        uni.showToast({
          title: '请选择支付方式!',
          icon: 'none',
        })
        return
      }
      this.btnDisabled = true
      // 余额抵扣
      if (this.current == 0) {
        // H5环境
        this.$http('api/orders/goodsPay', {
          id: this.id,
          pay_type: 1,
					password:this.password
        }).then(res => {
					this.password = ''
					this.btnDisabled = false
					this.buyShow = false
          uni.showToast({
            title: res.msg,
						icon:'none'
          })
          setTimeout(() => {
						uni.switchTab({
							url:'/pages/my/index'
						})
          }, 800)
        }).catch(()=>{
					this.password = ''
				})
      } else if (this.current == 7) {
				this.$http('api/orders/goodsPay', {
				  id: this.id,
				  pay_type: this.current
				}).then(res => {
					// #ifdef H5
						location.href = this.$url + 'index/index/pay?order_num=' + res.order_num
						// location.href = res.pay
						// location.href = this.$url + 'index/index/pay?order_num=' + res.data.data
					// #endif
					// #ifdef APP-PLUS
						if (plus.os.name.toLowerCase() == 'ios') {
							plus.runtime.openURL(res.pay)
						} else {
							uni.setStorageSync('payUrl',res.pay)
							uni.navigateTo({
								url: '/pages/pay/web'
							})
						}
					// #endif
					this.btnDisabled = false
					this.buyShow = false
				  
				}).catch(()=>{
					
				})
			} else if (this.current == 8) {
				this.$http('api/orders/goodsPay', {
				  id: this.id,
				  pay_type: this.current
				}).then(res => {
					module.cashierPayMulti(res.pay, (res)=>{
						setTimeout(() => {
							uni.switchTab({
								url:'/pages/my/index'
							})
						}, 800)
					})
				  
				}).catch(()=>{
					
				})
				
				
			}
    },
  },
}
</script>

<style lang="less" scoped>
	.white {
		color: #3c3c3c;
	}
	.gold {
  color: #9c8b66;
}
.payBtn {
	color: #FFFFFF;
	font-size: 32rpx;
	font-weight: bold;
  height: 88rpx !important;
  background: linear-gradient(90deg, #EEA634, #DE2D32);
  border-radius: 44px;
	&::after {
		border: none;
	}
}

.payIcon {
  width: 48rpx;
  height: 48rpx;
}
.orderImg {
  width: 200rpx;
  display: block;
  margin: 0 auto;
  height: 200rpx;
}
</style>
